// 秒杀-首页
function ms_index() {
    let mockData = Mock.mock({
        "prolist|12": [{
            'img': "@image('285x366',#eac7ce)",
            'logo': "@image('100x32',#fdfaf6)",
            'title': "@ctitle(4, 8)",
            'timeleft|100000-108000': 1
        }]
    });
    new Vue({
        el: '#ms_index',
        data() {
            return {
                prolist: null,
                activityList:null,
                activityState:null,
                miaoTime:null,
                topnavlist: {},
                params:''//搜索框
            }
        },
        components: {
            'i-list': ms_i_list
        },
        methods: {
            getData() {
                var that = this;
                //this.prolist = mockData.prolist;
                //获取秒杀活动列表及活动时间
                axios({
                    method: 'post',
                    url: urlParam.domain() + '/api/spikeActivity/spikeActivityList',
                    responseType: 'stream',
                }).then(function(response) {
                    that.activityList = response.data.data;
                });
            },
        },
        created() {
            this.getData()
        }
    })
}

// 秒杀-首页-单项
let ms_i_item = {
    template: `<div class="ms-i-item-wrap">
        <img :src="pro.activityPicturePc" width="285" height="366">
        <div class="ms-pro-info">
            <div class="ms-timeleft">
                {{activityState}}
                <span class="num">{{time.day}}</span>天
                <span class="num">{{time.hour}}</span>时
                <span class="num">{{time.minute}}</span>分
                <span class="num">{{time.second}}</span>秒
            </div>
            <div class="ms-pro-logo-wrap">
                <div class="ms-pro-logo-top">
                    <img :src="pro.brandLogo">
                    <p class="ms-pro-title">{{pro.activityName}}</p>
                </div>
                <button class="ms-qianggou"><a :href="pro.pcHref">立即抢购</a></button>
            </div>
        </div>
    </div>`,
    props: ['pro'],
    data() {
        return {
            time: null
        }
    },
    methods: {
        //将剩余秒数转换为天 时 分 秒格式
        exchangeTimeLeave: function() {
            if(this.pro.startTime > 0){
                //未开始状态
                this.miaoTime = (this.pro.startTime);
                this.activityState = "距开始";
            }else{
                if(this.pro.startTime <= 0 && this.pro.endTime >= 0){
                    //秒杀进行中
                    this.miaoTime = (this.pro.endTime);
                    this.activityState = "剩余";
                }else{
                    //秒杀已结束
                    this.activityState = "已结束";
                }
            }
            this.time = transformTimeleft(this.miaoTime);
        },
        //倒计时
        countdown: function() {
            var that = this;
            setInterval(function() {
                if(that.pro.startTime > 0){
                    that.pro.startTime--;
                }
                if(that.pro.startTime <= 0 && that.pro.endTime >= 0){
                    that.pro.endTime--;
                }
                that.exchangeTimeLeave();
            }, 1000)
        },
    },
    created() {
        this.exchangeTimeLeave();
        this.countdown();
    }
}

// 秒杀-首页-列表
let ms_i_list = {
    template: `<div class="ms-i-list">
        <i-item v-for="(pro,index) in prolist" :key="index" :pro="pro"></i-item>
    </div>`,
    props: ['prolist'],
    components: {
        'i-item': ms_i_item
    }
}

// 秒杀-商品列表页
function ms_products() {
    let mockData = Mock.mock({
        "logobanner": "@image(1920x115,@color)",
        "navlist|8": [{
            "text": "@ctitle(2,4)",
            "href": "#"
        }]
    });
    new Vue({
        el: '#ms_products',
        data() {
            return {
                prolist: null,
                timeleft: null, //剩余秒数
                time: null, //剩余秒数转换后存储的对象
                activityProductList:null,
                activityState:null,
                logobanner:null,
                navlist:null,
                shopInfo:{},//店铺信息
            }
        },
        components: {
            'pro-list': ms_pro_list
        },
        methods: {
            getData() {
                var that = this;
                var href = urlParam.href();
                this.navlist = mockData.navlist;
                axios({
                    method: 'post',
                    url: urlParam.domain() + '/api/shop/shopInfo?id=' + href.businessId,
                    responseType: 'stream',
                }).then(function(response) {
                    that.logobanner = response.data.data.backgroundImg;
                    that.shopInfo = response.data.data;
                });

                //获取秒杀活动商品列表及活动时间
                axios({
                    method: 'post',
                    url: urlParam.domain() + '/api/spikeActivity/activityProductList?activityId=' + href.activityId,
                    responseType: 'stream',
                }).then(function(response) {
                    let d = response.data.data;
                    that.activityProductList = d.activityList;
                    if(d.startTime>0){
                        //未开始状态
                        that.timeleft = d.startTime;
                        that.activityState = "距秒杀开始还剩余";
                    }else{
                        if(d.startTime<=0 && d.endTime >=0){
                            //秒杀进行中
                            that.timeleft = d.endTime;
                            that.activityState = "距秒杀结束还剩余";
                        }else{
                            //秒杀已结束
                            that.activityState = "秒杀活动已结束";
                        }
                    }
                });


            },
            //将剩余秒数转换为天 时 分 秒格式
            exchangeTimeLeave: function() {
                this.time = transformTimeleft(this.timeleft);
            },
            //倒计时
            countdown: function() {
                var that = this;
                setInterval(function() {
                    that.timeleft--;
                    that.exchangeTimeLeave();
                }, 1000)
            }
        },
        created() {
            this.getData();
            this.exchangeTimeLeave();
            this.countdown();
        }
    })
}

// 秒杀-商品列表页-单项
let ms_pro_item = {
    template: `<div class="ms-pro-item-wrap">
        <a :href="pro.pcHref">
        <img :src="pro.commodityPicImg">
        <div class="ms-pro-detail-wrap">
            <div>
                <span class="unit">￥</span>
                <span class="price">{{pro.activityPrice}}</span>
            </div>
            <div class="sell-info">
                <del>￥{{pro.commodityPrice}}</del>
                <p>{{pro.salesNumber}}件已付款</p></div>
            <div class="qiang">抢</div>
            <div class="triangle-left"></div>
            <p class="ms-pro-title">{{pro.title}}</p>
        </div>
        </a>
    </div>`,
    props: ['pro'],
    data() {
        return {
            hour: null,
            minute: null,
            second: null
        }
    }
}

// 秒杀-商品列表
let ms_pro_list = {
    template: `<div class="ms-pro-list">
        <pro-item v-for="(pro,index) in prolist" :key="index" :pro="pro"></pro-item>
    </div>`,
    props: ['prolist'],
    components: {
        'pro-item': ms_pro_item
    }
}